<script lang="ts" setup>
import Notification from '@/components/notification.vue';
import Breadcrumb from '@/components/breadcrumb.vue';
import menuService from '@/composable/menu';
import user from '@/store/user-store';
import utils from '@/utils';
const userStore = user();

const fullScreen = () => {
  document.documentElement.requestFullscreen();
};
</script>
<template>
  <div class="bg-white p-4 px-5 flex justify-between items-center">
    <div class="flex justify-center items-center">
      <div class="" @click="menuService.showOrHideMenu">
        <i class="fas fa-square-caret-right pr-2 text-lime-700" v-if="menuService.isClose.value"></i>
        <i class="fas fa-square-caret-left pr-2 text-lime-700" v-else="!menuService.isClose.value"></i>
      </div>
      <Breadcrumb class="hidden md:block" />
    </div>

    <div class="flex justify-center items-center relative">
      <Notification class="mr-8" />
      <i class="fas fa-tablet mr-8" @click="fullScreen"></i>
      <div class="flex justify-center items-center group">
        <img :src="userStore.info?.avatar" class="w-8 h-8 rounded-full object-cover border-2" />
        <span class="ml-1 text-sm text-gray-600">{{ userStore.info?.name }}</span>
        <section
          class="group-hover:block absolute top-full z-50 bg-white shadow-sm whitespace-nowrap border rounded-md px-3 hidden"
        >
          <div class="flex items-center cursor-pointer border-b py-3">
            <a class="fab fa-500px"></a>
            <span class="text-sm text-gray-500 ml-2">网站首页</span>
          </div>
          <div class="flex items-center cursor-pointer border-b py-3">
            <a class="fab fa-500px"></a>
            <span class="text-sm text-gray-500 ml-2">文档资料</span>
          </div>
          <div class="flex items-center cursor-pointer border-b py-3" @click="utils.user.logout()">
            <a class="fab fa-500px"></a>
            <span class="text-sm text-gray-500 ml-2">退出登录</span>
          </div>
        </section>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped></style>
